<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit"/>
    <title>shopping cart</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <script src="../js/angular-1.4.6.min.js"></script>
    <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
    <style>
        .title{text-align: center;}
        .title p{font-size: 30px;border-bottom: 1px solid #d7d7d7;display: inline-block;padding-bottom: 10px;font-weight: bold;margin-top: 40px;}
        .title span{font-size: 16px;display: block;margin-top: 25px;}
        .cart-list{margin-top: 30px;}
        .cart-list li{border-top: 1px solid #d7d7d7;border-bottom: 1px solid #d7d7d7;padding-top: 15px;margin-top: 15px;}
        .cart-list li .select input{width: 20px;height: 20px;}
        .cart-list li .img-box{width: 270px;height: 310px;display: table;}
        .cart-list li .img-box a{display: table-cell;vertical-align: middle;}
        .cart-list li .img-box a img{display: block;margin: 0 auto;max-width: 270px;max-height: 310px;}
        .cart-list li .detail{margin-left: 30px;width: 900px;}
        .cart-list li .detail .top-detail{border-bottom: 1px solid #d7d7d7;padding-bottom: 10px;}
        .cart-list li .detail .top-detail p{color: #726b66;line-height: 24px;}
        .cart-list li .detail .top-detail .c-name{color: #333;margin-bottom: 3px;}
        .cart-list li .detail .top-detail .detail-btn{width: 90px;height: 24px;border: 1px solid #d7d7d7;line-height: 24px;text-align: center;
            font-size: 14px;color: #666;margin-top: 5px;background-color: #f8f8f8;}

        .table{width: 100%;margin-top: 15px;font-size: 14px;}
        .table th{width: 25%;height: 32px;background-color: #f8f8f8;text-align: center;}
        .table td{padding: 10px 0;}
        .table .tc{border: 1px solid #d7d7d7;overflow: hidden;display: inline-block;cursor: default;}
        .table .tc span{display: inline-block;float: left;width: 24px;height: 24px;text-align: center;line-height: 24px;font-size: 16px;}
        .table .tc span:active{background-color: #e1e1e1;}
        .table .tc input{display: inline-block;float: left;width: 50px;height: 24px;text-align: center;border: none;border-left: 1px solid #d7d7d7;border-right: 1px solid #d7d7d7;}

        .add-note{}
        .add-note p{font-size: 26px;line-height: 80px;text-align: center;font-weight: bold;}
        .add-note textarea{display: block;width: 100%;border: 1px solid #d7d7d7;resize: none;outline: none;font-size: 14px;line-height: 24px;}
        .add-note span{font-size: 16px;line-height: 30px;}

        .total-cash{text-align: right;font-size: 26px;margin: 15px 0;}
        .total-cash span{font-size: 28px;}

        .foot-bar{height: 80px;line-height: 80px;}
        .foot-bar .control-bar{width: 850px;background-color: #e0e0e0;font-size: 18px;}
        .foot-bar .control-bar .all-select{margin-left: 50px;}
        .foot-bar .control-bar .all-select input{width: 20px;height: 20px;vertical-align: middle;}
        .foot-bar .control-bar .delete{margin-left: 200px;}
        .foot-bar .control-bar .selected{margin-left: 250px;}
        .pay{width: 350px;text-align: center;font-size: 26px;cursor: pointer;}
        .pay img{vertical-align: baseline;}
    </style>
</head>
<body ng-app="">
<!--公共头部-->
<div ng-include="'../html/header.html'"></div>
<div class="bread container-fluid">
    <div class="container clear">
        <div class="fl path">
            <p class="fs-18"><em>You are here:&nbsp;</em><span class="bold red text-capitalize">shopping cart</span></p>
        </div>
        <div class="fr">
            <div class="btn b-red white fs-14 bold">JUMP TO<img src="../img/vimostsports（About-Us-）_03.jpg" alt=""/></div>
            <ul class="list fs-14 text-capitalize">
                <li>
                    <a href="">about us</a>
                </li>
                <li>
                    <a href="">gallery</a>
                </li>
                <li>
                    <a href="">sublimation</a>
                </li>
                <li>
                    <a href="">how to order</a>
                </li>
                <li>
                    <a href="">order process</a>
                </li>
                <li>
                    <a href="">fabric guide</a>
                </li>
                <li>
                    <a href="">blog</a>
                </li>
                <li>
                    <a href="">FAQS</a>
                </li>
                <li>
                    <a href="">customer reviews</a>
                </li>
                <li>
                    <a href="">contact us</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="content container">
    <div class="title">
        <p>YOUR SUMMARY</p>
        <span>Nearly there! just check the summary of the details below.</span>
    </div>
    <ul class="cart-list">
        <li>
            <div class="select">
                <input type="checkbox"/>
            </div>
            <div class="clear">
                <div class="img-box fl">
                    <a href="javascript:void(0);">
                        <img src="../img/vimostsports（Accessories）导航悬停样式_03.jpg" alt=""/>
                    </a>
                </div>
                <div class="detail fl">
                    <div class="top-detail">
                        <p class="c-name text-uppercase fs-16">baseball hoodie(jh009)</p>
                        <p class="c-type text-capitalize fs-14">heather gery/jet black</p>
                        <p class="c-size text-capitalize fs-14">size: l</p>
                        <p class="cus-name text-capitalize fs-14">custom name: james daivd</p>
                        <p class="cus-num text-capitalize fs-14">custom number: 9</p>
                        <div class="detail-btn">change</div>
                    </div>
                    <table class="table" border="0" cellpadding="0" cellspacing="0">
                        <thead>
                        <tr>
                            <th>Title</th>
                            <th>Price(US$)</th>
                            <th>Qty</th>
                            <th>Total(US$)</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <p class="text-uppercase">baseball hoodies(jh009)</p>
                                <p class="text-capitalize">add name</p>
                                <p class="text-capitalize">add number</p>
                            </td>
                            <td class="text-center">
                                <p>$17.80</p>
                                <p>$2 each</p>
                                <p>$2 each</p>
                            </td>
                            <td class="text-center">
                                <div class="tc">
                                    <span class="less">-</span>
                                    <input type="text" value="1"/>
                                    <span class="plus">+</span>
                                </div>
                            </td>
                            <td class="total-money text-center">$21.80</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </li>
        <li>
            <div class="select">
                <input type="checkbox"/>
            </div>
            <div class="clear">
                <div class="img-box fl">
                    <a href="javascript:void(0);">
                        <img src="../img/vimostsports（Accessories）导航悬停样式_03.jpg" alt=""/>
                    </a>
                </div>
                <div class="detail fl">
                    <div class="top-detail">
                        <p class="c-name text-uppercase fs-16">baseball hoodie(jh009)</p>
                        <p class="c-type text-capitalize fs-14">heather gery/jet black</p>
                        <p class="c-size text-capitalize fs-14">size: l</p>
                        <p class="cus-name text-capitalize fs-14">custom name: james daivd</p>
                        <p class="cus-num text-capitalize fs-14">custom number: 9</p>
                        <div class="detail-btn">change</div>
                    </div>
                    <table class="table" border="0" cellpadding="0" cellspacing="0">
                        <thead>
                        <tr>
                            <th>Title</th>
                            <th>Price(US$)</th>
                            <th>Qty</th>
                            <th>Total(US$)</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <p class="text-uppercase">baseball hoodies(jh009)</p>
                                <p class="text-capitalize">add name</p>
                                <p class="text-capitalize">add number</p>
                            </td>
                            <td class="text-center">
                                <p>$17.80</p>
                                <p>$2 each</p>
                                <p>$2 each</p>
                            </td>
                            <td class="text-center">
                                <div class="tc">
                                    <span class="less">-</span>
                                    <input type="text" value="1"/>
                                    <span class="plus">+</span>
                                </div>
                            </td>
                            <td class="total-money text-center">$21.80</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </li>
    </ul>
    <div class="add-note">
        <p>ADD NOTE</p>
        <textarea rows="5"></textarea>
        <span>Please tell us your note for the product.</span>
    </div>
    <p class="total-cash bold">YOUR TOTAL SO FAR: <span class="red">$43.60</span></p>
    <div class="foot-bar clear">
        <div class="fl control-bar">
            <div class="all-select fl">
                <label>
                    <input type="checkbox"/>Select
                </label>
            </div>
            <div class="delete fl">Delete</div>
            <div class="selected fl">Selected goods <span class="red">1</span></div>
        </div>
        <div class="pay fl b-red white">ADD TO BASKET <img src="../img/vimostsports（gouwuche）_15.jpg"/></div>
    </div>
</div>
<!--公共底部-->
<div ng-include="'../html/footer.html'"></div>
</body>
<script src="../js/scroll_top.js"></script>
</html>